<template>
  <div class="d_main">
    <!-- 操作区 S-->
    <div class="d_operationBox">
      <div class="d_btn">
        <el-button size="small" icon="el-icon-date" @click="isVisible = true"
          >库存明细</el-button
        >
      </div>
      <div class="d_search">
      <screec
          v-model="search.QueryDataBaseFiled"
          :headData.sync="tableHead"
          :disabled="searchLoading"
        ></screec>
        <el-input
          v-model="search.likeWords"
          placeholder="请输入关键字"
          size="small"
          @keyup.enter.native="getDataList"
        >
          <el-button
            slot="append"
            :loading="searchLoading"
            type="primary"
            icon="el-icon-search"
            :disabled="searchLoading"
            element-loading-spinner="el-icon-loading"
            @click="getDataList"
          >
            搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <!-- 操作区 E-->
    <!-- 表格操作区 S-->
    <div class="d_tableOperation">
      <div class="d_condition">
        <!--        <el-radio-group v-model="search.categoryCode" size="mini">
          <el-radio-button v-for="item in materialTypes" :key="item.code" :label="item.code">{{ item.name }}</el-radio-button>
        </el-radio-group>-->
      </div>
      <div class="d_set">
        <div @click="Refresh"><i class="d_icon el-icon-refresh-right" /></div>
        <div class="setting flex">
          <HeadSeting
            :list-data.sync="tableHead"
            :table-code="$config.selectgoodsinStockList"
            @reset="getTableHead"
          />
        </div>
      </div>
    </div>
    <!-- 表格操作区 E-->
    <!--table板块-->
    <div ref="tableCon" class="tableCon">
      <el-table
        v-show="tableHead.length > 0"
        id="emtable"
        ref="multipleTable"
        v-loading="searchLoading"
        :data="dataList"
        :height="tableHeight || 'auto'"
        border
        fit
        style="width: 100%"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @header-dragend="surverWidth"
        @expand-change="expandChange"
      >
        <template v-for="(fruit, index) in tableHead">
          <el-table-column
            v-if="fruit.visible"
            :key="index"
            :label="fruit.columnName"
            :min-width="fruit.columnWidth || 110"
            :prop="fruit.columnCode"
            show-overflow-tooltip
            :fixed="fruit.isFloat ? 'left' : false"
          >
            <template slot-scope="scope">
              <template v-if="fruit.columnCode === 'stockSumQuantity'">
                <span style="color: #e13335">{{
                  scope.row[fruit.columnCode]
                }}</span>
              </template>
              <template v-else>
                {{ scope.row[fruit.columnCode] }}
              </template>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="100px" fixed="right" align="center">
          <template slot-scope="scope" style="text-align: center">
            <div style="display: flex; justify-content: center">
              <span class="see"  v-permission="'MenuCode5-1-4-1'" @click="handleEdit(scope.row)">修改库位</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 骨架屏     -->
      <div v-if="tableHead.length == 0" class="p16">
        <el-skeleton :rows="6" animated />
      </div>
    </div>
    <!-- 分页 S-->
    <div class="d_pag">
      <pagination
        :total="total || 0"
        :page.sync="search.pageIndex"
        :limit.sync="search.pageSize"
        @pagination="getDataList"
      />
    </div>
    <!-- 分页 E-->
    <!-- 成品明细 -->
    <el-dialog
      v-dialogDrag
      title="库存明细"
      :visible.sync="isVisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
    >
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex flex_between" style="border-bottom: none">
          <div>
            <el-radio-group v-model="infoSearch.stockType" size="mini" @change="handleOptionChange">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="2">出库</el-radio-button>
              <el-radio-button label="1">入库</el-radio-button>
            </el-radio-group>
          </div>
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="infoSearch.likeWords"
              placeholder="输入关键字"
              size="small"
            >
              <el-button
                slot="append"
                :loading="infoLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="infoLoading"
                element-loading-spinner="el-icon-loading"
                @click="getInfoList"
              >
                搜索
              </el-button>
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon not lastTdNoBorder">
          <el-table
            v-loading="infoLoading"
            :data="finishedInfoList"
            max-height="460"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="associationNo"
              label="关联单号"
              min-width="170"
            />
            <el-table-column prop="changeTypeName" label="类型" min-width="100">
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="物料名称"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="stockGoodsName"
              label="规格型号"
              min-width="100"
            />
            <el-table-column
              prop="supplierName"
              label="供应商"
              min-width="130"
              show-overflow-tooltip
            />
            <el-table-column
              prop="beforeQuantity"
              label="变更前数量"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              prop="changeQuantity"
              label="变更数量"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              prop="afterQuantity"
              label="变更后数量"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              prop="goodsUnitName"
              label="单位"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column prop="areaShelfName" label="库位" min-width="110" show-overflow-tooltip >
            <template scope="{row}">
                {{ row.warehouseAreaName + row.areaShelfName || '--'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="changeRemark"
              label="备注"
              min-width="150"
              show-overflow-tooltip
            >
              <template scope="{row}">
                {{ row.changeRemark || "--" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--    分页-->
        <div class="paginaCon">
          <pagination
            :total="finishedTotal"
            :page.sync="infoSearch.pageIndex"
            :limit.sync="infoSearch.pageSize"
            @pagination="getInfoList"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="isVisible = false"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      v-dialogDrag
      title="修改库位"
      :visible.sync="isShowLocation"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
    >
      <div class="dialogDody">
        <div style="margin-top: 15px; padding: 0 15px">
          <tree-transfer
            :title="['仓库库位', '物料所在库位']"
            :from_data="fromData"
            :to_data="toData"
            :defaultProps="{ label: 'treeObjectName', children: 'chidren' }"
            node_key="treeObjectCode"
            pid="parentCode"
            @add-btn="add"
            @remove-btn="remove"
            :mode="mode"
            height="540px"
            filter
            openAll
          >
          </tree-transfer>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isShowLocation = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleSubmit"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import screec from "@/components/screen";
import treeTransfer from "el-tree-transfer";
import { arraySort } from "@/utils";
import Pagination from "@/components/Pagination";
import HeadSeting from "@/components/HeadSeting";
import MixA from "@/utils/mixin";
const mixa = new MixA();
export default {
  name: "MaterialQuery",
  components: { Pagination, HeadSeting, treeTransfer,screec },
  mixins: [mixa],
  data() {
    return {
      infoLoading: false,
      isVisible: false, // 库存明细弹框显示隐藏
      isShowLocation: false, //修改库位弹出层显示状态
      mode: "transfer", // transfer addressList
      fromData: [],
      toData: [],

      editParameter: {
        goodsCode: "",
        stockGoodsCode: "",
        areaShelfCodeList: [],
      },

      searchLoading: false,
      search: {
        QueryDataBaseFiled:'',
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        categoryCode: "",
      }, // 成品库存搜索条件
      total: 0,
      codeArr: [],
      expands: [],
      dataList: [],
      tableHeight: null,
      tableHead: [], // 表头
      materialTypes: [], // 物料分类列表
      finishedInfoList: [], // 库存明细列表
      finishedTotal: 0,
      infoSearch: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        stockType: 0,
      },
    };
  },
  created() {
    // 成品查询 动态表头
    this.getTableHead();
    // 获取物料分类
    this.getMaterialType();
    // 库存明细列表
    this.getInfoList();
  },
  mounted() {
    // 初始化表格高度
    this.calHeight();
    this.getLocationList();
  },
  methods: {
    // 库存明细列表
    getInfoList() {
      this.infoLoading = true;
      this.$api.warehouse
        .GetMatchPageSelectStockGoodsDetail(this.infoSearch)
        .then((res) => {
          this.finishedInfoList = res.list;
          this.finishedTotal = res.totalCount;
          this.infoLoading = false;
        })
        .catch(() => {
          this.infoLoading = false;
        });
    },

    //获取库位列表
    getLocationList() {
      this.$api.warehouse.GetAllAreaShelfDataList().then((res) => {
        res.forEach((item) => {
          item.parentCode = "";
        });
        this.fromData = res;
        console.log(this.fromData);
      });
    },

    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      console.log(fromData);
      console.log(obj);
    },
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      console.log(obj);
    },
    getRowKeys(row) {
      return row.stockGoodsID;
    },
    expandChange(row,expanded) {
      this.expands = [];
      if(expanded.length > 0){
      this.expands.push(row.stockGoodsID);
      }
    },
    // 获取物料分类
    getMaterialType() {
      const params = {
        dictionaryCode: "GoodsCategory",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        const item = { name: "全部", code: " " };
        this.materialTypes = [...res];
        this.materialTypes.unshift(item);
        this.search.categoryCode = this.materialTypes[0].code;
      });
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect();
        this.tableHeight = rect.height;
      });
    },
    // 半成品出库列表，清除所有查询条件
    Refresh() {
      this.search = this.$options.data().search;
      this.getDataList();
    },


    handleOptionChange(){
      this.infoSearch.pageIndex = 1
      this.getInfoList()
    },
    // 成品查询 动态表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.selectgoodsinStockList,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableHead = res;
        // 半成品出库列表
        this.getDataList();
      });
    },
    // 成品列表
    getDataList() {
      const params = this.search;
      this.searchLoading = true;
      this.$api.warehouse
        .GetMatchPageSelectStockGoods(params)
        .then((res) => {
          this.dataList = res.list;
          this.dataList.forEach((item)=>{
            for(let i in item){
              if(!item[i] && item[i] !== 0){
                item[i] = '--'
              }
            }
          })
          this.total = res.totalCount;
          this.searchLoading = false;
        })
        .catch(() => {
          this.searchLoading = false;
        });
    },

    //编辑
    handleEdit(row) {
      this.toData = [];
      this.getLocationList();
      this.editParameter.goodsCode = row.goodsCode;
      this.editParameter.stockGoodsCode = row.stockGoodsCode;
      if (row.stockGoodsKwDmList.length > 0) {
        this.toData = this.formDataTree(row.stockGoodsKwDmList);
      }
      this.isShowLocation = true;
    },

    //修改库位提交
    handleSubmit() {
      this.formDataCode(this.toData);
      this.$api.warehouse
        .BatchUpdateStockGoodsKw(this.editParameter)
        .then(() => {
          this.$message.success("修改成功！");
          this.isShowLocation = false;
          this.getDataList();
        });
    },

    formDataCode(res) {
      res.forEach((item) => {
        if (item.chidren.length > 0) {
          this.formDataCode(item.chidren);
        } else {
          this.codeArr.push(item.treeObjectCode);
        }
      });
      this.editParameter.areaShelfCodeList = this.codeArr;
    },

    //格式化数据
    formDataTree(res) {
      let treeData = res;
      treeData.forEach((item) => {
        if (item.chidren.length > 0) {
          this.formDataTree(item.chidren);
        } else {
          item.treeObjectName = "原料区" + item.treeObjectName;
        }
      });
      return treeData;
    },
  },
};
</script>
<style lang="scss" scoped>
.see {
  cursor: pointer;
  color: #409eff;
}
</style>
